<template>
  <div class="bottom">
    <van-tabbar v-model="active" style="position:inherit" @change="changeTab" >
      <van-tabbar-item :icon="item.img" v-for="item in buttom_arr" >{{ item.label }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { buttomType } from "../types/types";
import { router } from "@/router/router";
const active = ref(0);
const buttom_arr: buttomType[] = [
  {
    label: "点菜",
    img: "chat-o",
    router: "/order",
  },
  {
    label: "个人中心",
    img: "contact",
    router: "/person",
  }
];
const changeTab = (index: number) => {
  router.push(buttom_arr[index].router);
}

</script>

<style lang="scss" scope>
.bottom {
  display: flex;
  position: absolute;
  width: 100%;
  border-top: 1px solid #e3e3e3;
  bottom: 0;
  left: 0;
  height: 2rem;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
  z-index: 11;
}
</style>
